<template>
	<view>
		<!--轮播图-->
		<view class="banner">
			<swiper class="home_swiper" indicator-dots="true" autoplay="true" :interval="5000">
				<swiper-item v-for="(i,index) in list" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="i" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!--菜单-->
		<view class="menu_box">
			<view class="menu_list" :key="item.url" v-for="(item,index) in menulist" @click="menuClick(item.url)">
				<img :src="item.img" />
				<text>{{item.text}}</text>
			</view>
		</view>
		<!--我的服务-->
		<view class="service_box">
			<text class="title">我的服务</text>
			<view class="service_content">
				<view class="service_item" >
					<view class="service-group" @click="orderClick">
						<img src='../../static/index_3.jpg'>
						<view class="service-item-group">
							<text>等待付款</text>
							<text class="sub_title">订单详情</text>
						</view>
					</view>
					<view class="service-group"></view>
				</view>
				<view class="item"></view>
				<view class="service_item">
					<view class="service-group" @click="boxClick('/pages/index/store_index')">
						<img src="../../static/index_1.jpg">
						<view class="service-item-group">
							<text>{{storeName}}</text>
							<navigator>店铺</navigator>
						</view>
					</view>
					<view class="service-group" @click="boxClick('/pages/index/want_index')">
						<img src="../../static/index_2.jpg">
						<view class="service-item-group">
							<text>预约</text>
							<navigator>预约详情</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!--红木展区-->
		<view class="service_box">
			<text class="title">红木展区</text>
			<view class="service_content">
				<img class="service_item" src="../../static/IMG6000.jpg">
				<view class="item"></view>
				<img class="service_item" src="../../static/IMG5992.jpg">
			</view>
		</view>

	</view>
</template>

<script>
	import { getStoreInfo } from '@/request/api/store.js'
	import { getUserInfoStatus } from '@/request/api/userInfo.js'
	export default {
		data() {
			return {
				storeName: '轩铭阁',
				list: [
					"../../static/banner01.jpg",
					"../../static/banner01.jpg",
					"../../static/banner01.jpg"
				],

				menulist: [{
						url: "1",
						img: "../../static/1.jpg",
						text: "产品"
					},
					{
						url: "2",
						img: "../../static/2.jpg",
						text: "紫檀"
					},
					{
						url: "3",
						img: "../../static/3.jpg",
						text: "顶级"
					}
				],

				redWood_list: [{
						url: "",
						img: "../../static/IMG6000.jpg",
					},
					{
						url: "",
						img: "../../static/IMG5992.jpg",
					}
				]
			}

		},
		onShow() {
			if (!uni.getStorageSync("token")) {
				uni.navigateTo({
					url: '/pages/users/login'
				})
			}
			this.getStore()
		},
		methods: {
			menuClick(url) {
				uni.navigateTo({
					"url": "/pages/index/product_detail"
				})
			},
			orderClick() {
				uni.setStorageSync('abc', 0),
					uni.switchTab({
						url: '/pages/order/order'
					})
			},
			boxClick(url){
				uni.navigateTo({
					url
				})
			},
			getStore() {
				getStoreInfo().then((res)=>{
					this.storeName = res.data.storeName
				})
			}
		},
		mounted() {
			this.getStore()
			getUserInfoStatus().then((res)=>{
				if(res.code==0 && res.data==0){
					uni.showModal({
						title:'提醒',
						content:'完善资料',
						success:(r) => {
							if(r.confirm){
								uni.navigateTo({
									url:'/pages/my/userInfo'
								})
							}
						},
						
					})
				}
			})
		}
	}
</script>

<style scoped>
	.banner image {
		width: 100%;
	}

	.menu_box {
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10px 0px;
		align-items: center;
	}

	.menu_box .menu_list {
		display: flex;
		flex-direction: column;
		text-align: center;
		flex: 1;
		align-items: center;
	}

	.menu_box .menu_list img {
		width: 50px;
		height: 50px;
	}

	.menu_box .menu_list text {
		font-size: 12px;
		text-align: center;
		display: block;
	}


	.service_box {
		padding-left: 10px;
		padding-right: 10px;
		display: flex;
		flex-direction: column;
	}

	.service_box .title {
		margin-top: 10px;
	}

	.service_box .service_content {
		display: flex;
		flex-direction: row;
		background-color: white;
		margin-top: 10px;
		justify-content: space-between;
	}

	.service_box .service_content .item {
		flex: 1;
	}

	.service_box .service_content .service_item {
		width: 48%;
		max-width: 200px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		flex-shrink: 1;
		flex-grow: 1;
	}

	.service_box:last-child .service_content .service_item {
		width: 48%;
		max-width: 150px;
	}


	.service_box .service_content .service_item,
	.service_box .service_content .service_item .service-group {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.service_box .service_content .service_item .service-group {
		position: relative;
	}

	.service_box .service_content .service_item .service-group .service-item-group {
		position: absolute;
		top: 15%;
		left: 1%;
	}

	.service_box .service_content .service_item .service-group .service-item-group navigator,
	.service_box .service_content .service_item .service-group .service-item-group text {
		color: white;
		font-weight: 700;
		font-size: 14px;
		padding-left: 30px;
	}

	.service_box .service_content .service_item .service-group .service-item-group text:not(.sub_title),
	.service_box .service_content .service_item .service-group .service-item-group {
		font-size: 16px;
		display: block;
	}

	.service_box .service_content .service_item .service-group:last-child {
		margin-top: 10px;
	}
</style>